<template>
	<el-radio-group class="course_common_labels" v-model="courseType" size="small">
		<el-radio label="0" border v-removeAriaHidden>全部</el-radio>
		<template v-for="(item, index) in courseLabel">
			<el-radio :label="item.id" border v-removeAriaHidden>{{ item.name }}</el-radio>
		</template>
	</el-radio-group>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		value: { type: String, default: '0' }
	},
	data() {
		return {
			courseType: this.value
		};
	},
	computed: { ...mapGetters(['courseLabel']) },
	watch: {
		value(val) {
			this.courseType = val;
		},
		courseType(val) {
			this.$emit('input', val);
		}
	},
	mounted() {
		console.log(this.courseLabel);
	}
};
</script>

<style lang="scss" scoped>
.course_common_labels::v-deep {
	display: flex;
	align-items: center;
	margin: 24px 0;
	.el-radio {
		margin-right: 0;
		padding: 0 16px;
		border-radius: 16px;
		border-color: #dcdfe6;
		&.is-checked,
		&:hover {
			background-color: var(--primary-active);
			.el-radio__label {
				color: #fff;
			}
		}
	}
	.el-radio__input {
		display: none;
	}
	.el-radio__label {
		display: flex;
		align-items: center;
		padding: 0;
		font-size: 16px;
	}
}
</style>
